<!--
 * @Author: C.
 * @Date: 2023-03-09 17:35:04
-->
<template>
  <PageWrapper :title="t('routes.menu.Sa_Order') + t('common.detail')">
    <!-- extra：PageWrapper页面操作插槽 -->
    <template #extra>
      <!-- api-name 接口模块代码-->
      <!-- bill-key 单据key表示-->
      <!-- billId 单据编号-->
      <!-- mode 操作控制代码 数据来自后端 可对操作进行精细控制-->
      <!-- process 审核流 后端数据 对流进行监控-->
      <!-- change 操作change事件-->
      <!-- transformActions 单据转换扩展  label：标题  to：需要转换到的目标页面-->
      <!-- state :单据状态 用于控制转单据得按钮 -->
      <AuditController
        :api-name="apiModuleName"
        bill-key="Sa_Order"
        :billId="detailRef.BillId"
        :mode="detailRef.ShowButtonMode"
        :process="detailRef.AuditNodes"
        :state="detailRef.State"
        @change="fetchData"
        :transformActions="[
          {
            label: '发货',
            to: 'Sa_Delivery',
          },
        ]"
      />
    </template>
    <!-- subTitle：PageWrapper副标题插槽 -->
    <template #subTitle> {{ detailRef.BillId }} </template>
    <Block :title="t('common.billDes')">
      <!-- 描述组件 -->
      <Description @register="descRegister" />
    </Block>
    <Block :title="t('common.billDetails')" :wrapper="false">
      <BasicTable @register="registerTable" />
    </Block>
    <!-- 附件列表 fileId 单据ID  readOnly 是都只读-->
    <Annex :fileId="detailRef.BillId" readOnly />
    <!-- 审核流 process：审核节点列表 -->
    <AuditFlow :process="detailRef.AuditNodes" />
  </PageWrapper>
</template>

<script lang="ts" setup name="Sa_Order_Detail">
  // ----------------------------- 第三方引入 -----------------------------
  import { unref, ref, onMounted } from 'vue';
  // ----------------------------- hooks -----------------------------
  import { useAppRouter } from '/~/hooks/help/useAppRouter';
  import { useI18n } from '/@/hooks/web/useI18n';
  // 专用于详情表格的hook
  import { useAppDetailsTable } from '/~/hooks/help/useAppTable';
  // ----------------------------- 组件 -----------------------------
  import { PageWrapper } from '/@/components/Page';
  // 描述组件与hook
  import { Description, useDescription } from '/@/components/Description/index';
  import { BasicTable } from '/@/components/Table';
  // 审核流展示组件
  import { AuditFlow } from '/~/components/AuditFlow';
  // 附件展示组件
  import { Annex } from '/~/components/Annex';
  // 审核流控制组件（用于统一管理单据操作）
  import { AuditController } from '/~/components/AuditController';
  // ----------------------------- 其他引入 -----------------------------
  // OrderApi 模块接口集合  apiModuleName 接口模块名称
  import OrderApi, { apiModuleName } from '/@/api/work/sale/order';
  // 描述组件配置 明细表格配置
  import { descSchemas, tableColumns } from './schema.data';
  //----------------------------- 变量声明区 -----------------------------
  // 详情数据Ref
  const detailRef = ref<Recordable>({});
  // ----------------------------- hooks使用区 -----------------------------
  const { t } = useI18n();
  // currentRoute 当前的路由信息
  const { currentRoute } = useAppRouter();
  // setTableData 设置表格数据
  const [registerTable, { setTableData }] = useAppDetailsTable({
    columns: tableColumns,
    dataSource: [],
  });
  const [descRegister, { setDescProps }] = useDescription({
    data: {},
    schema: descSchemas,
  });
  // ----------------------------- 钩子函数区 -----------------------------
  onMounted(() => {
    // 加载数据
    fetchData();
  });
  //  ----------------------------- 自定义方法区 -----------------------------
  // 加载数据
  async function fetchData() {
    // 获取路由的传递的参数 ID
    const { Id } = unref(currentRoute).query;
    // 通过Id 查询单据信息
    const res = await OrderApi.api_get({ BillId: Id });
    detailRef.value = res;
    // 设置描述组件的数据
    setDescProps({
      data: res,
    });
    // 设置明细表格数据
    setTableData(res.BillItems);
  }
</script>
